<template>
	<view class="container">
		<view class="close iconfont icon-guanbi" @click="close"></view>
		<view class="drawer_user" v-if="!uid">
			<image src="/static/images/default_avatar.png" mode=""></image>
			<view class="drawer_user_info">
				<navigator url="/pages/users/login/index?isToLogin=isToLogin">
					<text class="nickname">{{$t(`page.user.placeLogin`)}}</text>
				</navigator>
			</view>
		</view>
		<view class="drawer_user" v-if="uid" @click="goPage('/pages/user/index')">
			<image :src="userInfo.avatar" mode=""></image>
			<view class="drawer_user_info">
				<text class="nickname">{{userInfo.nickname}}</text>
				<text class="email" v-if="userInfo.email">{{userInfo.email}}</text>
				<text class="email" v-else="userInfo.phone">{{userInfo.phone}}</text>
			</view>
		</view>
		<view class="draw_nav">
			<view class="draw_nav_item" v-for="(item,index) in drawerNav" :key="index" @click="goPage(item.url)">
				<view>
					<text class="iconfont left-icon" :class="item.icon"></text>
					<text class="pl-20">{{$t(`userDrawer.data[${index}].name`)}}</text>
				</view>
				<text class="iconfont icon-gengduo"></text>
			</view>
			<!-- <view v-for="(item,index) in langList" :key="index">
					<tui-collapse :index="index" :current="item.current" @click="change">
						<template v-slot:title>
							<view class="draw_nav_item">
								<view>
									<text class="iconfont left-icon icon-yuyan"></text>
									<text class="pl-20">{{$t(`userDrawer.data[6].name`)}}</text>
								</view>
							</view>
						</template>
						<template v-slot:content>
							<view class="tui-content" v-for="(items, idx) in item.intro" :key="idx" @click="languagelTab(items)">{{$t(`userDrawer.language[${idx}].name`)}}</view>
						</template>
					</tui-collapse>
				</view> -->
		</view>
	   
	</view>
</template>
<script>
	import { mapState } from 'pinia'
	import { useAppStore } from '@/stores/app'
	import tuiCollapse from "@/components/tui-collapse/tui-collapse"
	const appStore = useAppStore()
	const app = getApp()
	export default {
		name: "user-drawer",
		data() {
			return {
				langList: [
					{
						name: '语言',
						current: 1,
						intro: ['zh','en']
					}
				],
				drawerNav:[
					{icon:"icon-shouye",name:"Home",url:"/pages/index/index"},
					{icon:"icon-sousuo2",name:"Search",url:"/pages/goods_search/index"},
					{icon:"icon-fenlei",name:"Category",url:"/pages/goods_cate/index"},
					{icon:"icon-gouwuche",name:"Cart",url:"/pages/order_addcart/order_addcart"},
					{icon:"icon-xihuan",name:"My Favourites",url:"/pages/users/user_goods_collection/index"},
					{icon:"icon-gerenzhongxin",name:"Mine",url:"/pages/user/index"},
				],
			}
		},
		comments:{
			tuiCollapse
		},
		computed:{
			...mapState(useAppStore,['uid', 'userInfo']),
			language(){
				return this._i18n.locale
			}
		},
		methods:{
			change(e) {
				let index = e.index;
				let item = this.langList[index];
				item.current = item.current == index ? -1 : index
			},
			close(){
				this.$emit('close')
			},
			goPage(url){
				let that = this
				if(appStore.tabBar.includes(url)){
					uni.switchTab({
						url,
						complete(){
							that.$emit('close',false);
						}
					})
				}else{
					uni.navigateTo({
						url,
						complete(){
							that.$emit('close',false);
						}
					})
				}
				
			},
			languagelTab(n){
				//  语言切换
				this._i18n.locale = n;
				uni.setStorageSync('locale', n)
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tui-title {
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;
		font-size: 32rpx;
	}
	
	.tui-content {
		padding: 20rpx 30rpx;
		background-color: #fff;
		color: #555;
		font-size: 26rpx;
	}
	.lang_cent{
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 630rpx;
		height: 649rpx;
		position: fixed;
		top: 20%;
		z-index: 1000;
		left: 50%;
		margin-left: -305rpx;
		transform: translate3d(0, -200%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}
	.lang_box .on{
		transform: translate3d(0, 0, 0);
	}
	.container {
		width: 570rpx;
		background: #FFFFFF;
		padding: 30rpx 0 0 30rpx;
		box-sizing: border-box;
		.close{
			font-size: 30rpx;
			color: #666;
			display: flex;
			justify-content: flex-end;
			margin-bottom: 42rpx;
			margin-right: 30rpx;
		}
		.drawer_user{
			display: flex;
			align-items: center;
			image{
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
			}
			&_info{
				padding:18rpx 0 18rpx 20rpx;
				display: flex;
				flex-direction: column;
				.nickname{
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
				}
				.email{
					padding-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		.draw_nav{
			margin-top: 20rpx;
			&_item{
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #f5f5f5;
				.icon-gengduo{
					padding-right: 30rpx;
				}
				.text-999{
					color: #999;
					font-size: 28rpx;
				}
				.left-icon{
					display: inline-block;
					width: 40rpx;
				}
			}
		}
	}
</style>